<template>
	<view class="p-bot40">
		<view class="Take_box">
			<view class="evaluate ">
				<view class="Title">
					<view class="d-flex a-center p-left20">
						<text class="iconfont icon-a-028 color_33 size34 p-right20"></text>
						<text class="black size30">评价</text>
					</view>
					<!-- <view class="iconfont icon-a-zujian32"></view> -->
				</view>
				<view class="Box" v-if="count">
					<view class="list">全部({{count.allcount}})</view>
					<view class="list">好评({{count.goodcount}})</view>
					<view class="list">有图({{count.imgcount}})</view>
					<view class="list">差评({{count.midcount}})</view>
				</view>
			</view>

			<evaluate-li v-for="(item,index) in evaluate" :key="index" :pageData="item"></evaluate-li>

		</view>
	</view>
</template>

<script>
	import EvaluateLi from './EvaluateLi'
	export default {
		props: ['shop_id'],
		components: {
			EvaluateLi
		},
		data() {
			return {
				page: 1,
				pageNum: 10,
				count: '',
				evaluate: []
			}
		},

		methods: {
			get_comment(shop_id) {
				this.$http.get({
					url: '/singleSaleApi/get_comment',
					data: {
						shop_id,
						page: this.page,
						pageNum: this.pageNum
					}
				}).then(res => {
					if (res.errcode != 100) return this.$Toast(res.msg)
					const result = res
					this.count = result.count ?? ''
					this.evaluate = result.data || []
				})
			}
		},
		watch: {
			shop_id: {
				immediate: true,
				handler(newVal) {
					if (newVal) this.get_comment(newVal)
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.Take_box {
		width: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		overflow: hidden;
	}

	.evaluate {
		width: 100%;
		border-bottom: 1rpx solid $page;
	}

	.Title {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;


		.icon-a-zujian32 {
			padding: 20rpx;
			color: #999;
			font-size: 24rpx;
		}
	}

	.Box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx;

		.list {
			padding: 6rpx 24rpx;
			border: 1rpx solid $borColor;
			color: #333;
			font-size: 24rpx;
			margin: 0 20rpx 20rpx 0;
		}
	}
</style>